import React, { PureComponent } from 'react';
import { Link, Outlet } from "react-router-dom";
import { withRouter } from '../hoc'

class Home extends PureComponent {

  navigateTo(path) {
    const { navigate } = this.props.router;
    navigate(path)
  }

  render() { 
    return ( 
      <div>
        <h2>Home</h2>
        <div className='home-nav'>
          <Link to='/home/recommend'>推荐</Link>
          <Link to='/home/ranking'>排行榜</Link>
          <button onClick={e => this.navigateTo('/home/songs')}>歌单</button>
        </div>
        <div>
          {/* 子路由组件的占位符 = router-view */}
          <Outlet/>
        </div>
      </div>
     );
  }
}

//使用高阶组件
export default withRouter(Home);